<template>
  <section id="container">
    <myhead></myhead>
    <mymenu ref="mymenu"></mymenu>
    <section v-if="isaddfan" id="main-content">
      <section class="wrapper">
        <div class="row">
          <div class="col-lg-12 main-chart">
            <div class="border-head">
              <h3>盘管列表
                <button class="btn btn-small btn-theme04 btn-head" v-if="schoolState==1" v-bind:disabled="isReflash" @click="queryAllconfirm">更新状态</button>
                <button class="btn btn-small btn-theme04 btn-reflash" v-bind:disabled="isReflash" @click="reflash">刷新</button>
              </h3>
            </div>
          </div>
        </div>
        <div class="row mt mb">
          <div class="col-md-12">
            <section class="task-panel tasks-widget">
              <div class="panel-heading">
                <div class="pull-left">
                  <span>
                  <i class="fa fa-arrow-circle-left returnColor" v-bind:disabled="isReflash" @click="back"></i>
                  <i v-if="schoolState!=1" class="fa fa-bolt mymargin">学校离线</i>
                  </span>
                </div>
                <br>
              </div>
              <div class="panel-body">
                <table  id="sortable" class="display table table-bordered dataTable mycenter">
                  <thead>
                    <tr role="row" class="center">
                      <th >编号</th>
                      <th >楼层</th>
                      <th >电源</th>
                      <th >模式</th>
                      <th >风速</th>
                      <th >循环</th>
                      <th >温度</th>
                      <th >更新时间</th>
                      <th >状态</th>
                      <th >历史数据</th>
                      <th  v-if="schoolState==1">控制</th>
                    </tr>
                  </thead>
                  <tr class="gradeA odd" v-if="fanllist==''">
                    <td colspan="9"><div class="noinfo"><p>没有盘管信息!</p></div></td>
                  </tr>
                  <tbody role="alert" aria-live="polite" aria-relevant="all">
                    <template v-for="fan in fanllist">
                      <tr class="gradeA odd">
                        <td>{{fan.fanNumber}}</td>
                        <td>{{fan.floor}}</td>

                        <td v-if="fan.fanstate.switchgear===1" class="success">开机</td>
                        <td v-else class="danger">关机</td>


                        <td v-if="fan.fanstate.model===1">制冷</td>
                        <td v-else-if="fan.fanstate.model===2">制热</td>
                        <td v-else-if="fan.fanstate.model===3">除湿</td>
                        <td v-else>其他</td>

                        <td v-if="fan.fanstate.windSpeed===1">高速</td>
                        <td v-else-if="fan.fanstate.windSpeed===2">中速</td>
                        <td v-else-if="fan.fanstate.windSpeed===3">低速</td>
                        <td v-else-if="fan.fanstate.windSpeed===4">自动</td>
                        <td v-else>其他</td>

                        <td v-if="fan.fanstate.circulate===1">内循环</td>
                        <td v-else-if="fan.fanstate.circulate===2">全新风</td>
                        <td v-else-if="fan.fanstate.circulate===3">自动</td>
                        <td v-else>其他</td>

                        <td>{{fan.fanstate.temperature}}ºC</td>
                        <td>{{fan.fanstate.updateTime}}</td>
                        <td class="success" v-if="fan.fanstate.isOnLine===1">在线</td>
                        <td class="danger" v-else>离线</td>
                        <td >
                          <button class="btn btn-success btn-xs" v-bind:disabled="isReflash" @click="historyData(fan.id)">查看</button>
                     
                        </td>
                        <td v-if="schoolState==1">
                          <div class="pull-right hidden-phone">
                            <button class="btn btn-success btn-xs" v-bind:disabled="isReflash" @click="control(fan.id,1,1,2000,'开机',fan.fanstate.isOnLine)">开机</button>
                            <div class="mydrop">
                              <button class="btn btn-warning btn-xs" v-bind:disabled="isReflash" type="button"  @click="modecontrol($event)">模式<span class="caret"></span></button>
                              <ul  class="myclose" role="menu">
                                <li><a @click="control(fan.id,2,1,2000,'制冷',fan.fanstate.isOnLine)">制冷</a></li>
                                <li><a @click="control(fan.id,2,2,2000,'制热',fan.fanstate.isOnLine)">制热</a></li>
                                <li><a @click="control(fan.id,2,3,2000,'除湿',fan.fanstate.isOnLine)">除湿</a></li>
                              </ul>
                            </div>
                            <div class="mydrop">
                              <button class="btn btn-info btn-xs" type="button" v-bind:disabled="isReflash"  @click="modecontrol($event)">风速<span class="caret"></span></button>
                              <ul  class="myclose" role="menu">
                                <li><a @click="control(fan.id,3,1,2000,'高速',fan.fanstate.isOnLine)">高速</a></li>
                                <li><a @click="control(fan.id,3,2,2000,'中速',fan.fanstate.isOnLine)">中速</a></li>
                                <li><a @click="control(fan.id,3,3,2000,'低速',fan.fanstate.isOnLine)">低速</a></li>
                                <li><a @click="control(fan.id,3,4,2000,'自动',fan.fanstate.isOnLine)">自动</a></li>
                              </ul>
                            </div>
                            <div class="mydrop">
                              <button class="btn btn-info btn-xs" type="button" v-bind:disabled="isReflash"  @click="modecontrol($event)">循环<span class="caret"></span></button>
                              <ul  class="myclose" role="menu">
                                <li><a @click="control(fan.id,5,1,2000,'内循环',fan.fanstate.isOnLine)">内循环</a></li>
                                <li><a @click="control(fan.id,5,2,2000,'全新风',fan.fanstate.isOnLine)">全新风</a></li>
                                <li><a @click="control(fan.id,5,3,2000,'自动',fan.fanstate.isOnLine)">自动</a></li>
                              </ul>
                            </div>
                            <button class="btn btn-danger btn-xs" v-bind:disabled="isReflash" @click="tempcontrol(fan.id,fan.fanstate.isOnLine)">温度</button>
                            <button class="btn btn-danger btn-xs" v-bind:disabled="isReflash" @click="control(fan.id,1,0,2000,'关机',fan.fanstate.isOnLine)">关机</button>
                          </div>
                        </td>
                      </tr>
                    </template>
                  </tbody>
                </table>
                <div class=" add-task-row">
                  <a class="btn btn-success btn-sm pull-left" @click="addfan(false)">添加</a>
                </div>
              </div>
            </section>
          </div>
        </div>
      </section>
    </section>
    <addfan v-if="!isaddfan" @isadd="addfan"></addfan>
  </section>
</template>

<script>
  import myhead from './myhead.vue'
  import mymenu from './mymenu.vue'
  import addfan from './addfan.vue'
  import apiConfig from '../../config/api.config'
  export default {
    name: 'fan',
    data () {
      return {
        head_message: '云归谷远程控制系统',
        fanllist:[],
        isaddfan:true,
        isReflash:false,
        schoolState:1,
      }
    },
    components: {
      myhead,mymenu,addfan
    },
    mounted () {
      this.schoolState = sessionStorage.getItem('schoolState')
      this.fanInformation()
      this.setMenu()
    },
    methods:{
      back(){
        this.$router.push({path: '/index'})
      },
      setMenu(){
        this.$refs.mymenu.setMenu('fan')
      },
      tempcontrol(id,state){
        $("#sortable .mydrop ul").removeClass("mydropmenopen").addClass("myclose")
        var that = this
        var content = '<div id="setTemperature"><input  class=" form-control" v-model.trim="fanNumber" type="number" required="" autofocus><div>'
        $.confirm({
          title: '请输入温度值!',
          content: content,
          confirmButton: '发送',
          cancelButton: '取消',
          confirmButtonClass: 'btn-warning',
          cancelButtonClass: 'btn-success',
          backgroundDismiss: false,
          columnClass: 'col-md-4 col-md-offset-4',
          confirm: function(){
            var temp = $("#setTemperature input").val()
            if(temp>0){
              that.controlBase(id,4,temp,2000,state)
            }else{
              that.showToast("请输入大于0的温度值!")
            }
          },
          cancel: function(){
          }
        })
      },
      modecontrol($event){
         if($event.currentTarget.nextElementSibling.className == 'mydropmenopen'){
            $("#sortable .mydrop ul").removeClass("mydropmenopen").addClass("myclose")
         }else{
            $("#sortable .mydrop ul").removeClass("mydropmenopen").addClass("myclose")
            $event.currentTarget.nextElementSibling.className='mydropmenopen'
         }
      },
      fanInformation:function(state){
        var that = this
        var token = sessionStorage.getItem('shiro-token')
        var schoolId = sessionStorage.getItem('schoolId')
        if (!token) {
          that.$router.push({path: '/'})
          return true
        }else{
          var instance = this.$axios.create({
            headers: {'Authorization':token}
          });
          instance.post('ganzi-server/school/fanInformation',{
            schoolId:schoolId
          })
          .then(function (response) {
            if(response.data.code == '200'){
              if(response.data.data && response.data.data.length>0 ){
                that.fanllist = response.data.data
              }
            }else{
              that.showToast(response.data.msg)
            }
          })
          .catch(function (error) {
            if(error.response && error.response.data.status == 4001){
              sessionStorage.clear();
              that.$router.push({path: '/'})
            }else if(error.response && error.response.data.status == 4002){
              sessionStorage.clear();
              that.showToast('您的账号在其他地方登录,如非本人操作，请立即修改密码！')
              that.$router.push({path: '/'})
            }else{
              that.showToast('系统异常!')
            }
          });
        }
      },
      queryAllconfirm(){
        var that = this
        $.confirm({
          icon: 'fa fa-spinner fa-spin',
          title: '提示!',
          content: '确认需要发送查询盘管状态指令?',
          confirmButton: '确认',
          cancelButton: '取消',
          confirmButtonClass: 'btn-warning',
          cancelButtonClass: 'btn-success',
          backgroundDismiss: false,
          columnClass: 'col-md-4 col-md-offset-4',
          confirm: function(){
            that.queryAll()
          },
          cancel: function(){
          }
        })
      },
      queryAll:function(){
        var that = this
        var token = sessionStorage.getItem('shiro-token')
        var schoolId = sessionStorage.getItem('schoolId')
        if (!token) {
          this.$router.push({path: '/'})
          return true
        }else{
          this.isReflash = true
          var instance = this.$axios.create({
            headers: {'Authorization':token}
          });
          instance.post('ganzi-server/sendMessageToSchool/queryAll',{
            schoolId:schoolId
          })
          .then(function (response) {
            if(response.data.code == '200'){
              that.showToast("指令发送成功,请稍后刷新！")
            }else{
              that.showToast(response.data.msg)
            }
            that.isReflash = false
          })
          .catch(function (error) {
            if(error.response && error.response.data.status == 4001){
              sessionStorage.clear();
              that.$router.push({path: '/'})
            }else if(error.response && error.response.data.status == 4002){
              sessionStorage.clear();
              that.showToast('您的账号在其他地方登录,如非本人操作，请立即修改密码！')
              that.$router.push({path: '/'})
            }else{
              that.showToast('系统异常!')
            }
            that.isReflash = false
          });
        }
      },
      addfan:function(msg){
        if(msg === true){
          this.fanInformation();
        }
        this.isaddfan = msg
      },
      reflash:function(){
        this.isReflash = true
        this.fanInformation()
        setTimeout(() =>{
           this.isReflash = false
        },3000);
      },
      control(fanid,type,value,time,msg,state){
        $("#sortable .mydrop ul").removeClass("mydropmenopen").addClass("myclose")
        var that = this
        $.confirm({
        title: '提示!',
        content: "发送"+msg+"指令！",
        confirmButton: '发送',
        cancelButton: '取消',
        confirmButtonClass: 'btn-warning',
        cancelButtonClass: 'btn-success',
        backgroundDismiss: false,
        columnClass: 'col-md-4 col-md-offset-4',
        confirm: function(){
          that.controlBase(fanid,type,value,time,state)
        },
        cancel: function(){
        }
      })
      },
      controlBase(fanid,type,value,time,state){
        if(state == 2){
          this.showToast('盘管离线，不能发送控制指令！')
          return
        }
        this.isReflash = true
        this.baseSend('ganzi-server/sendMessageToSchool/sendOneControl',{
          fanId:fanid,
          type:type,
          value:value
        });
        setTimeout(() =>{
           this.isReflash = false
        },time);
      },
      baseSend(url,param){
        var token = sessionStorage.getItem('shiro-token')
        var that = this
        var instance = this.$axios.create({
          headers: {'Authorization':token}
        });
        instance.post(url,{
          json:param
        })
        .then(function (response) {
          if(response.data.code == '200'){
            that.$options.methods.showToast("指令发送成功")
          }else{
            that.$options.methods.showToast(response.data.msg)
          }
        })
        .catch(function (error) {
          if(error.response && error.response.data.status == 4001){
              sessionStorage.clear();
              that.$router.push({path: '/'})
            }else if(error.response && error.response.data.status == 4002){
              sessionStorage.clear();
              that.showToast('您的账号在其他地方登录,如非本人操作，请立即修改密码！')
              that.$router.push({path: '/'})
            }else{
              that.showToast('系统异常!')
            }
        });
      },
      historyData(id){
        var baseurl = apiConfig.baseURL
        var that = this
        var token = sessionStorage.getItem('shiro-token')
        var datas = JSON.stringify({"fanId":id,"size":100})
        var win = $.confirm({
          title: '历史状态:',
          content: function ($obj) {
             return $.ajax({
                type: "POST",
                headers: {
                    'Authorization':token
                },
                url: baseurl+'ganzi-server/info/findFanHistory',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data:datas,
                success: function (data) {
                  if(data.code == '200'){
                      if(data.data && data.data.length>0 ){
                        var htmls = '<table class="table table-bordered table-condensed table-striped"><tbody><tr><th>电源</th><th>模式</th><th>风速</th><th>循环</th><th>温度</th><th>时间</th></tr>'
                        for(let info of data.data){
                          htmls+='<tr>'
                          var state = JSON.parse(info.information)
                          if(state.switchgear == 1){
                            htmls+='<td>开机</td>'
                          }else{
                            htmls+='<td>关机</td>'
                          }
                          if(state.model == 1){
                            htmls+='<td>制冷</td>'
                          }else if(state.model == 2){
                            htmls+='<td>制热</td>'
                          }else if(state.model == 3){
                            htmls+='<td>除湿</td>'
                          }else{
                            htmls+='<td>其他</td>'
                          }
                          if(state.windSpeed == 1){
                            htmls+='<td>高速</td>'
                          }else if(state.windSpeed == 2){
                            htmls+='<td>中速</td>'
                          }else if(state.windSpeed == 3){
                            htmls+='<td>低速</td>'
                          }else if(state.windSpeed == 4){
                            htmls+='<td>自动</td>'
                          }else{
                            htmls+='<td>其他</td>'
                          }
                          if(state.circulate == 1){
                            htmls+='<td>内循环</td>'
                          }else if(state.circulate == 2){
                            htmls+='<td>全新风</td>'
                          }else if(state.circulate == 3){
                            htmls+='<td>自动</td>'
                          }else{
                            htmls+='<td>其他</td>'
                          }
                          htmls+='<td>'+state.temperature+'ºC</td>'
                          htmls+='<td>'+info.tempTimePoint+'</td>'
                          htmls+='</tr>'
                        }
                        htmls+='</tbody></table>'
                        $obj.contentDiv.html(htmls)
                      }else{
                        $obj.contentDiv.html('没有信息')
                      }
                  }else{
                    $obj.contentDiv.html(data.msg)
                  }
                },
                error: function (error) {
                  win.close();
                  if(error.responseJSON && error.responseJSON.status == 4001){
                    sessionStorage.clear();
                    that.$router.push({path: '/'})
                  }else if(error.responseJSON && error.responseJSON.status == 4002){
                    sessionStorage.clear();
                    that.showToast('您的账号在其他地方登录,如非本人操作，请立即修改密码！')
                    that.$router.push({path: '/'})
                  }else{
                    that.showToast('系统异常!')
                  }
                }
            });
          },
          confirmButton: false,
          cancelButton: '关闭',
          cancelButtonClass: 'btn-success',
          backgroundDismiss: false,
          columnClass: 'col-md-6 col-md-offset-3',
          cancel: function(){
          }
        })
      },
      showToast:function(msg){
        $.alert({
          title: '消息!',
          content: msg,
          confirmButton: '确定',
          confirmButtonClass: 'btn-warning',
          backgroundDismiss: false,
          confirm: function(){
          }
        });
      }
    }
  }
</script>

<style scoped>
  @import "../assets/css/to-do.css";
  @import "../assets/css/school.css";

</style>
